<template>
	<view class="wrap">
		<u-navbar :title="$t('ggzx')" title-width="340" :border-bottom="false" back-icon-color="#fff" title-color="#fff" :background="{ backgroundColor: '#0030A8' }"></u-navbar>
		<view class="list">
			<mescroll-uni :fixed="false" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view @tap="toDetail(item)" class="cell" v-for="(item,index) in list" :key="index">
				<text class="cell-title u-line-1">{{item.title}}</text>
				<text class="cell-time">{{item.createDate}}</text>
				<text class="cell-text u-line-2">{{item.introduction}}</text>
			</view>
			</mescroll-uni>
		</view>
	</view>
</template>

<script>
	import {mapState,mapGetters} from 'vuex';
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				list:[],
			};
		},
		onLoad() {
			
		},
		onShow() {
			
		},
		computed:{
			
		},
		methods:{
			// 下拉刷新
			downCallback(){
				this.mescroll.resetUpScroll()
			},
			// 上拉加载
			upCallback(page){
				this.$api.homeApi.getNews({
						page: page.num,
						pageSize:10,
					})
					.then(res => {
						let list=res.data || [];
						this.mescroll.endSuccess(list.length)
						if(page.num == 1) this.list = []; //如果是第一页需手动制空列表
						this.list=this.list.concat(list); //追加新数据
					})
					.catch(err => {
						//联网失败, 结束加载
						this.mescroll.endErr();
					})
			},
			// to 公告详情
			toDetail(item){
				if(item.richContent){
					item.richContent=item.richContent.replace(/&nbsp;/g, '\xa0');
					this.$store.commit('saveNews',item)
				}
				uni.navigateTo({
					url:'/pages/User/AnnouncementList/details/details'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap{
		background: none;
		display: flex;
		flex-direction: column;
		.list{
			flex: 1;
			min-width: 0;
			min-height: 0;
			overflow: auto;
			.cell{
				display: flex;
				flex-direction: column;
				border: 1px solid #f2f2f2;
				padding: 40rpx $nr-padd;
				&-title{
					color: #333333;
					font-size: 28rpx;
					font-weight: bold;
				}
				&-text{
					color: #333333;
					font-size: 24rpx;
				}
				&-time{
					color: #999999;
					font-size: 24rpx;
					margin: 14rpx  0rpx;
				}
			}
		}
	}
</style>
